/* @import url(background.css); */
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    margin: 0;
}
body {
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    min-height: 100vh !important;
    background-color: rgb(172, 230, 255);
    background-image:
        radial-gradient(closest-side, rgb(230, 218, 252), rgba(235, 105, 78, 0)),
        radial-gradient(closest-side, rgba(255, 255, 255, 0.794), rgba(243, 11, 164, 0)),
        radial-gradient(closest-side, rgba(247, 201, 235, 0.794), rgba(254, 234, 131, 0)),
        radial-gradient(closest-side, rgb(241, 241, 241), rgba(170, 142, 245, 0)),
        radial-gradient(closest-side, rgb(209, 176, 244), rgba(248, 192, 147, 0));
    background-size:
        130vmax 130vmax,
        80vmax 80vmax,
        90vmax 90vmax,
        110vmax 110vmax,
        90vmax 90vmax;
    background-position:
        -80vmax -80vmax,
        60vmax -30vmax,
        10vmax 10vmax,
        -30vmax -10vmax,
        50vmax 50vmax;
    background-repeat: no-repeat;
    animation: 10s movement linear infinite;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

@keyframes movement {
    0%,
    100% {
        background-size:
            130vmax 130vmax,
            80vmax 80vmax,
            90vmax 90vmax,
            110vmax 110vmax,
            90vmax 90vmax;
        background-position:
            -80vmax -80vmax,
            60vmax -30vmax,
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
    }

    25% {
        background-size:
            100vmax 100vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            60vmax 60vmax;
        background-position:
            -60vmax -90vmax,
            50vmax -40vmax,
            0vmax -20vmax,
            -40vmax -20vmax,
            40vmax 60vmax;
    }

    50% {
        background-size:
            80vmax 80vmax,
            110vmax 110vmax,
            80vmax 80vmax,
            60vmax 60vmax,
            80vmax 80vmax;
        background-position:
            -50vmax -70vmax,
            40vmax -30vmax,
            10vmax 0vmax,
            20vmax 10vmax,
            30vmax 70vmax;
    }

    75% {
        background-size:
            90vmax 90vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            70vmax 70vmax;
        background-position:
            -50vmax -40vmax,
            50vmax -30vmax,
            20vmax 0vmax,
            -10vmax 10vmax,
            40vmax 60vmax;
    }
}


.content{
    margin: 100px auto;
    width: 1180px;
    /*background-color: #fff;*/
    /* display: flex;
    flex-direction: row;
    flex-wrap: wrap; */

    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 假设每个子元素最小宽度为280px */  
    gap: 10px; /* 设置网格间距，这里包括水平和垂直间距 */  
    justify-content: start; /* 或者使用 space-between, space-around 等来分配空间 */  
}
.content .user-item{
    background-color: rgba(255, 255, 255, 0.49);
    backdrop-filter: blur(40px);
    width: 280px;
    height: 460px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    position: relative;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0 20px 20px 0;
}
.user-item:hover{
    background: rgba(0,0,0,0.2);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    transition: 0.2s all ease-out;
    background-color: rgb(255, 198, 222);

}
.user-item:hover .user-avatar{
    border: 4px solid rgba(141, 201, 255, 0.96);
}
.content .user-item .user-avatar{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 35px;
    border: 4px solid rgb(246, 178, 207);
}

.content .user-item .user-name{
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.content .user-item .user-name span{
    margin-left: 5px;
}
.content .user-item .user-name .gender{
    width: 30px;
    border-radius: 50%;
    background-color: #fff;
    color: #ff9494;
}
.gender{
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
}
.zone{
    position: absolute;
    left: 5px;
    top: 5px;
    width: 35px;
    cursor: pointer;
    transition: transform 0.5s ease;
}
@keyframes rotate-and-scale {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1.1) rotate(360deg);
    }
}
.zone:hover{
    animation: rotate-and-scale 1s infinite linear;
}
.age{
    margin-top: 15px;
}
.education{
    margin-top: 10px;
}
.character{
    margin-top: 10px;  
    width: 200px;  
    text-align: center; /* 居中子元素（但这里实际上不起作用，因为span是inline-block） */  
    line-height: 20px;

}
.character span{
    display: inline-block; /* 使span表现为块级元素，但不会独占一行 */
    background-color: rgb(149, 178, 255);
    padding: 2px 5px 2px 5px;
    margin: 2px; /* 可选，增加间距 */
    border-radius: 10px;
    text-align: center;
}
.address{
    margin-top: 10px;
}
.motto{
    margin-top: 10px;;
    width: 240px;
    text-align: center;
    /* white-space: nowrap;   */
    overflow: hidden; /* 隐藏超出部分 */  
    text-overflow: ellipsis; 
}
.like{
    position: absolute;
    bottom: 7px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 80%;
}
.mylike{
    position: absolute;
    bottom: 7px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 80%;
}
.mylike span{
    color: #d34e6d;
    font-size: 17px;
    font-weight: bold;
}
.like span{
    color: #d34e6d;
    font-size: 17px;
    font-weight: bold;
}
.like img{
    width: 50px;
    cursor: pointer;
}
.like img:hover{
    transition: 0.5s;
    transform: scale(1.1);
}
.name{
    position: absolute;
    top:5px;
    font-size: 20px;
}
.logout{
    font-size: 18px;
    color: #6f6dff;
}
.logout:hover{
    color: #ffc6de;
}
.user-item:hover .user-avatar {
    border-color: rgb(111, 109, 255); /* 替换成你想要的边框颜色 */
}
